<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//标志 判断是增加还是修改
String update =request.getParameter("update");
request.setCharacterEncoding("UTF-8");
%>


<html>
  <head>
  <link rel="stylesheet" href="<%=path %>/css/flora.all.css" type="text/css" />
    <script src="<%=path %>/jquery/jquery-1[1].2.3.js" type="text/javascript"></script>
     <script src="<%=path %>/jquery/ui.datepicker.js" type="text/javascript"></script>
   
    
  </head>
 
  <body>
  
  <html:form  action="/refresh">
<script type="text/javascript">
 
 $(document).ready(function() {
	
	//$.datepicker.setDefaults($.datepicker.regional['ch']);
  //$('#example6').datepicker({defaultDate: new Date(2007, 2 -1, 26)});
	//$.datepicker.setDefaults($.datepicker.regional['']);
	$("#date").datepicker({dateFormat:'yy-mm-dd',showOn: 'both',buttonImageOnly: true, buttonImage: '<%=path%>/image/calendar2.gif'});	
	$("#startdate").datepicker({dateFormat:'yy-mm-dd',showOn: 'both',buttonImageOnly: true, buttonImage: '<%=path%>/image/calendar2.gif'});	
	$("#enddate").datepicker({dateFormat:'yy-mm-dd',showOn: 'both',buttonImageOnly: true, buttonImage: '<%=path%>/image/calendar2.gif'});	
	//$("#repeatFlag").css({display: 'none'});
    
    // if you select different repeatType,the dispaly is different
	$("#repeatType").change(function(){
		 var repeatType=$("#repeatType").val();
		 var repeatCycleStyle="day";
         if(repeatType==1)
        	 repeatCycleStyle="day";
         else if (repeatType == 2)
        	 repeatCycleStyle="week";
         else if (repeatType == 3)
        	 repeatCycleStyle="month";
         else if (repeatType == 4)
        	 repeatCycleStyle="year";    

    	 var repeatCycleTdHtml= '<td colspan="4"> Repeat every'+
    	                         ' <html:select property="repeatCycle" styleId="repeatCycle" >' +
    	                         ' <c:forEach var="i" begin ="1" end="30" >'+
    	                         '<html:option   value= "${i}"> ${i} </html:option>'+
    	                         ' </c:forEach>'+
    	                         '</html:select>'+repeatCycleStyle+
    	                         '</td>'
		 $("#repeatCycleTd").html(repeatCycleTdHtml);
		}
    );

    $("#repeat").click(function(){
    	if($(this).attr("checked") == true){
    		$("#repeatFlag").css({display: 'block'});   
         }else{
        	 $("#repeatFlag").css({display: 'none'});   
             }
        }
     );
});

  function save(update){
   var form =document.forms(0);
  
   if(update!="null"&&update!=""){
       form.update.value="true";
   }
   
    form.action="<%=path%>/saveCalendar.do";
    form.submit();
   }
     
  </script>
  <html:hidden property="update"/>
   <table>
     <tr>
        <td>Title</td>
        <td><html:text  property= "title" /> </td>
     </tr>
      
     <tr>
        <td>Start Time</td>
        <td >  
           <html:select property="startHour" >
           <c:forEach var="i" begin ="0" end="23" >
           <html:option   value= "${i}"> ${i}时 </html:option>   
           
           </c:forEach>
           </html:select>
  
           <html:select property="startMinutes" >
           <c:forEach var="i" begin ="0" end="59" >
           <html:option   value= "${i}"> ${i}分 </html:option>   
           
           </c:forEach>
           </html:select>
        </td>
     </tr>
     <tr>
        <td>End Time</td>
        <td>
          <html:select property="endHour" >
           <c:forEach var="i" begin ="0" end="23" >
           <html:option   value= "${i}"> ${i}时 </html:option>   
           
           </c:forEach>
           </html:select>
  
           <html:select property="endMinutes" >
           <c:forEach var="i" begin ="0" end="59" >
           <html:option   value= "${i}"> ${i}分 </html:option>   
           
           </c:forEach>
           </html:select>
        </td>
     </tr>
     <tr>
     <td>Date</td>
       <td>
         <html:text  property= "date"  styleId="date" /> 
       </td>
     </tr>
    
     <tr>
       <td>
          Descripe
       </td>
       <td>
       <html:textarea property="event" rows="10">
       
       </html:textarea>
       </td>
     </tr>
     
     <tr >
       <td  colspan="4">
       <html:checkbox property="repeat" value="true" styleId="repeat">
          Repeat
        </html:checkbox>
         <fieldset id="repeatFlag" style="display:none" ><LEGEND>Repeat</LEGEND>
           <table  border="0">
               
                <tr>
                  <td>Start Date</td>
                  <td>
                       <html:text  property= "startDate"  styleId="startdate" /> 
                  </td>
                   
                   <td>End Date</td>
                  <td>
                       <html:text  property= "endDate"  styleId="enddate" /> 
                  </td>
                </tr>
                 <tr> 
                   <td>
                      Repeat Type
                   </td>
                   <td>
                    <html:select property="repeatType" styleId="repeatType" value="1">
                       <html:option   value= "1"> day </html:option>   
                       <html:option   value= "2"> week </html:option>  
                       <html:option   value= "3"> month </html:option>   
                       <html:option   value= "4"> year </html:option>     
                    </html:select>
                   </td>
                  </tr>
                 <tr id="repeatCycleTd">
                    <td colspan="4">
                     Repeat every 
                      <html:select property="repeatCycle" styleId="repeatCycle" >
                          <c:forEach var="i" begin ="1" end="30" >
                              <html:option   value= "${i}"> ${i} </html:option>   
           
                          </c:forEach>
                      </html:select>
                     Day
                  </td>
                 </tr>  
           </table>
         </fieldset>
       </td>
     </tr>

     <tr>
      <td><input type='button' value="Save" onclick="save('<%=update%>')"></td>
      <td><input type='button' value="Cancle" onclick="javascript:history.go(-1)"></td>
     </tr>
   </table>
   </html:form>
  </body>
</html>
